{% extends "wechat/layout.html" %}

{% set title = '学习记录' %}
{% block header %}
<header class="m-header">
	<img src="../../static/images/logoblack.png" alt="" class="logo">
	<h3 class="title">
        {{ data['number'] }}. {{ data['lesson'] }}
		<div class="section">第{{ data['session_number'] }}节</div>
	</h3>
</header>
{% endblock %}
{% block contents %}
<div class="m-content">
	<div class="agent">
		<div class="name-date">
        	<span class="name">学生: {{ data['student_name'] }}</span>
        	<span class="date" style="float:right;">{{ data['datetime'] }}</span>
		</div>
        <div class="agent-name">机构名称: {{ data['school_name'] }}</div>
		<div class="teacher">教师：{{ data['teacher_name'] }}</div>
	</div>
    {% if data['step_id'] > 0 -%}
    <h3 class="score {{ data['remark_class'] }}">{{ data['remark'] }}</h3>
    {%- elif data['number'] < 3 -%}
    <h3 style="text-align:center;color: #999">乐曲无演奏</h3>
    {%- else -%}
    <h3 style="text-align:center;color: #999">本课未演奏</h3>
    {%- endif %}
	<div class="m-sections">
		<ul class="sections">
			<li class="section checked">
				<span class="section-name">第1节</span>
				<div class="s-content first">
					<h3 class="title">乐理知识
					</h3>
                    {% for knowlege in data['knowledge'] %}
                    <div class="point">{{ loop.index }}.{{ data['knowledge'][loop.index - 1] }}</div>
                    {% endfor %}
				</div>
				<i class="iconfont icon-check"></i>
			</li>
            <li class="section{% if data['step_id'] > 4 %} checked{% endif %}">
				<span class="section-name">{% if 4 < data['step_id'] and data['step_id'] < 9 %}本节{% endif %}</span>
				<div class="s-content act">
					<h3 class="title">弹奏</h3>
				</div>
				{% if 4 < data['step_id'] -%}
				<i class="iconfont icon-check"></i>
				{%- endif %}
			</li>
			<li class="section third{% if data['step_id'] > 9 %} checked{% endif %}">
            <div class="section-name">{% if 9 < data['step_id'] < 15 %}本节{% endif %}</div>
				<div class="s-content">
					<h3 class="title">识谱演奏
						<!-- <i class="iconfont icon-checked"></i> -->
					</h3>
				</div>
				{% if 9 < data['step_id'] -%}
				<i class="iconfont icon-check"></i>
				{%- endif %}
			</li>
			<li class="section fouth{% if data['step_id'] > 15 %} checked{% endif %}">
            <div class="section-name">{% if data['step_id'] > 15 %}本节{% endif %}</div>
				<div class="s-content last">
					<h3 class="title">考核</h3>
				</div>
				{% if 15 < data['step_id'] -%}
				<i class="iconfont icon-check"></i>
				{%- endif %}
			</li>
		</ul>
	</div>
	<div class="share">
		<span>分享</span>
		<i class="iconfont icon-share"></i>
		<div class="warning"><a href="{{ url_for('wechat.login') }}">- 登录查看具体成绩 -</a></div>
	</div>
	<div class="m-mask">
		<img src="/static/images/fenxiang-android.png">
	</div>
</div>

<!-- <footer class="m-footer">
	这里放广告／推广／链接
</footer> -->
<script type="text/javascript">
	var is_session = '{{ request.args.get('session_id') }}';
	if(is_session != 'None'){
		$('.m-header').prepend('<div class="top">'+
			'<i class="iconfont icon-arrow-left" style="font-size:24px;margin-left:10px;"></i>'+
			'<span class="title">推送详情</span>'+
		'</div>');
		$('.m-header').css('margin-top','55px');
	}
</script>

{% endblock %}
